<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生日快乐！</title>
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Quicksand', sans-serif;
      background-color: #fff0f5;
      color: #ff6b9f;
      overflow-x: hidden;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      position: relative;
    }
    
    header {
      text-align: center;
      padding: 40px 0;
      position: relative;
    }
    
    h1 {
      font-size: 4rem;
      margin-bottom: 20px;
      text-shadow: 2px 2px 4px rgba(255, 107, 159, 0.3);
      animation: pulse 2s infinite;
    }
    
    p.wish {
      font-size: 1.8rem;
      margin-bottom: 30px;
      line-height: 1.6;
    }
    
    .gallery {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .carousel {
      width: 100%;
      max-width: 800px;
      height: 500px;
      position: relative;
      margin: 40px auto;
      overflow: hidden;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(255, 107, 159, 0.2);
    }
    
    .carousel-container {
      display: flex;
      transition: transform 0.5s ease-in-out;
      height: 100%;
    }
    
    .carousel-slide {
      min-width: 100%;
      height: 100%;
    }
    
    .carousel-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    
    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.7);
      border: none;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      font-size: 24px;
      color: #ff6b9f;
      cursor: pointer;
      z-index: 10;
      transition: all 0.3s;
    }
    
    .carousel-btn:hover {
      background: rgba(255, 255, 255, 0.9);
      color: #ff4785;
    }
    
    #prevBtn {
      left: 20px;
    }
    
    #nextBtn {
      right: 20px;
    }
    
    .hearts {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
    }
    
    .heart {
      position: absolute;
      font-size: 20px;
      color: #ff6b9f;
      animation: falling 5s linear infinite;
      opacity: 0.7;
    }
    
    .balloon-container {
      position: fixed;
      bottom: -100px;
      animation: float 15s linear infinite;
    }
    
    .balloon {
      width: 60px;
      height: 75px;
      background: #ff6b9f;
      border-radius: 50%;
      position: relative;
      animation: balloonBounce 2s ease-in-out infinite;
      box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.1);
    }
    
    .balloon:after {
      content: "";
      width: 4px;
      height: 80px;
      background: rgba(255, 255, 255, 0.7);
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -80px;
    }
    
    .message {
      text-align: center;
      padding: 40px 20px;
      font-size: 1.4rem;
      line-height: 1.8;
      margin-top: 40px;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 20px;
      box-shadow: 0 5px 15px rgba(255, 107, 159, 0.1);
    }
    
    footer {
      text-align: center;
      padding: 20px;
      margin-top: 50px;
      font-size: 0.9rem;
    }
    
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
    
    @keyframes falling {
      0% {
        transform: translateY(-100vh) translateX(0) rotate(0deg);
        opacity: 1;
      }
      100% {
        transform: translateY(100vh) translateX(100px) rotate(720deg);
        opacity: 0;
      }
    }
    
    @keyframes float {
      0% {
        transform: translateY(0) translateX(0);
      }
      50% {
        transform: translateY(-500px) translateX(100px);
      }
      100% {
        transform: translateY(-1000px) translateX(0);
        opacity: 0;
      }
    }
    
    @keyframes balloonBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    
    .cake {
      width: 100px;
      height: 80px;
      background: #ffd1dc;
      border-radius: 10px 10px 0 0;
      position: relative;
      margin: 40px auto;
    }
    
    .cake:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 20px;
      background: #ffb6c1;
      top: -20px;
      border-radius: 10px 10px 0 0;
    }
    
    .candle {
      width: 10px;
      height: 30px;
      background: #fff;
      position: absolute;
      top: -50px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 5px;
    }
    
    .candle:after {
      content: "";
      width: 10px;
      height: 10px;
      background: #ffcc33;
      position: absolute;
      top: -10px;
      left: 0;
      border-radius: 50%;
      animation: flame 0.5s infinite alternate;
    }
    
    @keyframes flame {
      0% { transform: scaleY(1); background: #ffcc33; }
      100% { transform: scaleY(1.2); background: #ff9933; }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>生日快乐！</h1>
      <p class="wish">祝你生日快乐，愿你的每一天都充满阳光和笑容！</p>
      <div class="cake">
        <div class="candle"></div>
      </div>
    </header>
    
    <div class="gallery">
      <div class="carousel">
        <div class="carousel-container">
          <div class="carousel-slide">
            <img src="images/IMG_0005.JPG" alt="生日照片">
          </div>
          <div class="carousel-slide">
            <img src="images/IMG_0052.JPG" alt="生日照片">
          </div>
          <div class="carousel-slide">
            <img src="images/IMG_0102.JPG" alt="生日照片">
          </div>
          <div class="carousel-slide">
            <img src="images/IMG_0268.JPG" alt="生日照片">
          </div>
          <div class="carousel-slide">
            <img src="images/IMG_0295.JPG" alt="生日照片">
          </div>
          <div class="carousel-slide">
            <img src="images/IMG_0477.JPG" alt="生日照片">
          </div>
          <div class="carousel-slide">
            <img src="images/IMG_0594.JPG" alt="生日照片">
          </div>
          <div class="carousel-slide">
            <img src="images/IMG_0732.JPG" alt="生日照片">
          </div>
          <div class="carousel-slide">
            <img src="images/IMG_0833.JPG" alt="生日照片">
          </div>
          <div class="carousel-slide">
            <img src="images/IMG_1137.JPG" alt="生日照片">
          </div>
          <div class="carousel-slide">
            <img src="images/IMG_1149.JPG" alt="生日照片">
          </div>
          <div class="carousel-slide">
            <img src="images/IMG_1371.JPG" alt="生日照片">
          </div>
          <div class="carousel-slide">
            <img src="images/IMG_2109.JPG" alt="生日照片">
          </div>
          <div class="carousel-slide">
            <img src="images/IMG_3950.JPG" alt="生日照片">
          </div>
          <div class="carousel-slide">
            <img src="images/IMG_3955.JPG" alt="生日照片">
          </div>
        </div>
        <button class="carousel-btn" id="prevBtn">❮</button>
        <button class="carousel-btn" id="nextBtn">❯</button>
      </div>
    </div>
    
    <div class="message">
      <p>愿你永远保持这份可爱，</p>
      <p>愿你被这个世界温柔以待，</p>
      <p>愿你的笑容如阳光般灿烂，</p>
      <p>愿你的未来如鲜花般绚烂。</p>
      <p>生日快乐，亲爱的！</p>
    </div>
  </div>
  
  <div class="hearts" id="hearts"></div>
  
  <script>
    // 轮播图功能
    document.addEventListener('DOMContentLoaded', function() {
      const carouselContainer = document.querySelector('.carousel-container');
      const slides = document.querySelectorAll('.carousel-slide');
      const prevBtn = document.getElementById('prevBtn');
      const nextBtn = document.getElementById('nextBtn');
      
      let counter = 0;
      const size = slides[0].clientWidth;
      
      carouselContainer.style.transform = 'translateX(' + (-size * counter) + 'px)';
      
      // 按钮事件监听
      nextBtn.addEventListener('click', () => {
        if (counter >= slides.length - 1) return;
        carouselContainer.style.transition = "transform 0.5s ease-in-out";
        counter++;
        carouselContainer.style.transform = 'translateX(' + (-size * counter) + 'px)';
      });
      
      prevBtn.addEventListener('click', () => {
        if (counter <= 0) return;
        carouselContainer.style.transition = "transform 0.5s ease-in-out";
        counter--;
        carouselContainer.style.transform = 'translateX(' + (-size * counter) + 'px)';
      });
      
      // 自动轮播
      setInterval(() => {
        if (counter >= slides.length - 1) {
          counter = -1;
          carouselContainer.style.transition = "none";
          carouselContainer.style.transform = 'translateX(' + (-size * counter) + 'px)';
        }
        setTimeout(() => {
          counter++;
          carouselContainer.style.transition = "transform 0.5s ease-in-out";
          carouselContainer.style.transform = 'translateX(' + (-size * counter) + 'px)';
        }, 50);
      }, 5000);
      
      // 创建心形动画
      const heartsContainer = document.getElementById('hearts');
      const heartSymbols = ['❤', '💗', '💕', '💖', '💘'];
      
      function createHeart() {
        const heart = document.createElement('div');
        heart.classList.add('heart');
        heart.textContent = heartSymbols[Math.floor(Math.random() * heartSymbols.length)];
        heart.style.left = Math.random() * 100 + 'vw';
        heart.style.animationDuration = (Math.random() * 5 + 3) + 's';
        heartsContainer.appendChild(heart);
        
        setTimeout(() => {
          heart.remove();
        }, 8000);
      }
      
      // 创建气球
      function createBalloon() {
        const balloonContainer = document.createElement('div');
        balloonContainer.classList.add('balloon-container');
        balloonContainer.style.left = Math.random() * 100 + 'vw';
        
        const balloon = document.createElement('div');
        balloon.classList.add('balloon');
        const colors = ['#ff6b9f', '#ffb6c1', '#ff8da1', '#ffa6c9', '#ff85a2'];
        balloon.style.background = colors[Math.floor(Math.random() * colors.length)];
        
        balloonContainer.appendChild(balloon);
        document.body.appendChild(balloonContainer);
        
        setTimeout(() => {
          balloonContainer.remove();
        }, 15000);
      }
      
      // 定时创建心形和气球
      setInterval(createHeart, 300);
      setInterval(createBalloon, 2000);
    });
  </script>
</body>
</html> 